<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ arr.length }}</strong></span>
    <ul class="filters">
      <li @click="btn('all')">
        <a :class="{selected: isCon === 'all'}" href="javascript:;" >全部</a>
      </li>
      <li @click="btn('no')">
        <a :class="{selected: isCon === 'no'}" href="javascript:;">未完成</a>
      </li>
      <li @click="btn('ok')">
        <a :class="{selected: isCon === 'ok'}"  href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearBtn">清除已完成</button>
  </footer>
</template>
<script>
export default {
  props: ["arr"],
  data(){
    return {
      isCon: "all" // 昨晚作业索引, 换成了字母判断, 只有三种情况('all', 'no', 'ok')
    }
  },
  methods: {
    btn(str){
      this.isCon = str; // 改变保存高亮的字符, 上面动态class就会自动判断生效
      this.$emit("changeType", str); // 'all' 'no' 'ok' 其中一个传给App.vue
    },
    clearBtn(){
      this.$emit("clearType");
    }
  }
}
</script>